import React, { Component } from 'react'
import './index.css';
import axios from 'axios';

export default class Goods extends Component {
    state = {
        goods: []
    }
    render() {
        return (
            <div className='goods-container'>
                <h2>商品列表</h2>
                <hr />
                <div className="goods-list">
                    {
                        this.state.goods.map(item => {
                            return <div className="goods-item" key={item.id}>
                                        <div className="img">
                                            <img src={item.remote_img} alt="" />
                                        </div>
                                        <p className="price">￥{item.price}</p>
                                        <h5 className="title">
                                            {item.title.substr(0, 30)}
                                        </h5>
                                        <div className="shop">
                                            {item.shop}
                                        </div>
                                        <div className="info">
                                            {item.isZY && <div className="ziying">
                                                自营
                                            </div>}
                                            
                                        </div>
                                    </div>
                        })
                    }
                </div>
            </div>
        )
    }

    async componentDidMount(){
        let {data} = await axios.get('http://api.xiaohigh.com:8090/goods?_limit=12');
        this.setState({
            goods: data
        })
    }
}
